<template>
  <div class="home-view">
    <div class="chartList">
      <div v-for="chart in chartList" :key="chart.id" :id="chart.id" class="chartItem"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Charts from '../charts/core'

const chartList = ref([
  {
    id: 'chart1',
    chart: null,
    options: {
      container: 'chart1',
      data: [
        { name: 'A', value: 100 },
        { name: 'B', value: 200 },
        { name: 'C', value: 300 },
      ],
      type: 'pie',
      options: {
        title: {
          text: 'Pie Chart',
        },
        legend: true,
        tooltip: true,
      },
    },
  },
  {
    id: 'chart2',
    chart: null,
    options: {
      container: 'chart2',
      data: [
        { name: 'A', value: 100 },
        { name: 'B', value: 200 },
        { name: 'C', value: 300 },
      ],
      type: 'line',
    },
  },
])

onMounted(() => {
  chartList.value.forEach((chart) => {
    chart.chart = new Charts(chart.options)
  })
})
</script>
<style scoped>
.home-view {
  height: 100%;
}
.chartItem {
  width: 400px;
  height: 300px;
  display: inline-block;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
